<template>
  <div class="container">
    <div class="brilliant">
      <!-- 短视频 -->
      <div class="brilliantVideo">
        <div class="videoTitle">
          <h1>精彩短视频</h1>
          <div class="titleText">
            <span>更多</span>
            <ArrowRight style="width: 1em; height: 1em; margin-right: 8px" />
          </div>
        </div>
        <div class="videoContainer">
          <div
            class="videoBox"
            v-for="(item, index) in mvList"
            :key="item.artistId"
          >
            <div class="videoImg" @click="goMvDetail(item.id, index, 0)">
              <img :src="item.cover" alt="" />
            </div>
            <div class="videoContext">
              <h5>{{ item.name }}</h5>
              <div class="videoInfo">
                <StarFilled
                  style="width: 1em; height: 1em; margin-right: 8px"
                />
                <span>{{ item.artistName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 排行版 -->
      <div class="brilliantTop">
        <div class="topTitle">
          <h1>快手热版</h1>
        </div>
        <div class="topContext">
          <div
            class="topItem"
            v-for="(item, index) in mvTopList"
            :key="item.artistId"
            @click="goMvDetail(item.id, index, 1)"
          >
            <h1>{{ index + 1 }}</h1>
            <div class="topDesc">
              <span> {{ item.name }} </span>
              <div class="topIcon">
                <Star
                  style="width: 1em; height: 1em; margin-right: 8px; color: red"
                />
                <span>{{ item.artistName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, onUnmounted } from 'vue'

export default defineComponent({
  name: 'VideoHeader',
})
</script>

<script lang="ts" setup>
import { ArrowRight, StarFilled, Star } from '@element-plus/icons'
import { getMvListApi, getMvTopListApi } from '../../../api/home'
import { useRouter } from 'vue-router'
import PubSub from 'pubsub-js'

const router = useRouter()

// 视频列表
const mvList = ref([])
// 视频排行榜列表
const mvTopList = ref([])
// 存储用户点击进入的视频下标
const currentIndex = ref<number>()
// 储存用户点击排行榜进入视频详情页的标识、
const topIndex = ref<number>()
// 储存视频id
const mvId = ref<number>(0)
// 获取视频
const GetMvList = async () => {
  const res = await getMvListApi()
  // console.log(res);
  mvList.value = res.data.slice(0, 8)
}
// 获取视频排行榜
const getMvTopList = async () => {
  const res1 = await getMvTopListApi(10)
  // console.log(res1);
  mvTopList.value = res1.data
}

const goMvDetail = (id: number, index: number, type: number) => {
  if (type) {
    topIndex.value = index
  } else {
    currentIndex.value = index
  }
  router.push({ path: '/detail', query: { id, type } })
}

// const aa = (data) => {
//   if (!data) {
//     if (currentIndex.value === 0) {
//       currentIndex.value = mvList.value.length - 1;
//     }
//     currentIndex.value--;
//   } else {
//     if (currentIndex.value === mvList.value.length - 1) {
//       currentIndex.value = 0;
//     }
//     currentIndex.value++;
//   }
//   mvId.value = mvList.value[currentIndex.value].id;
//   return mvId.value;
// };

// const bb = (data) => {
//   if (!data) {
//     if (topIndex.value === 0) {
//       topIndex.value = mvTopList.value.length - 1;
//     }
//     topIndex.value--;
//   } else {
//     if (topIndex.value === mvTopList.value.length - 1) {
//       topIndex.value = 0;
//     }
//     topIndex.value++;
//   }
//   mvId.value = mvTopList.value[topIndex.value].id;
//   return mvId.value;
// };

onMounted(() => {
  // 获取视频
  GetMvList()
  // 获取视频排行榜
  getMvTopList()

  PubSub.subscribe('switchPlay', (_msg: any, data: number) => {
    // console.log('switchPre', msg, data);
    // data=0标识用户点击的是上一个视频，data=1标识用户点击的是下一个视频
    // 精彩短视频区
    if (!data) {
      if (currentIndex.value === 0) {
        currentIndex.value = mvList.value.length - 1
      } else {
        currentIndex.value--
      }
    } else {
      if (currentIndex.value === mvList.value.length - 1) {
        currentIndex.value = 0
      } else {
        currentIndex.value++
      }
    }
    // aa(data);
    // 排行榜区
    if (!data) {
      if (topIndex.value === 0) {
        topIndex.value = mvTopList.value.length - 1
      } else {
        topIndex.value--
      }
    } else {
      if (topIndex.value === mvTopList.value.length - 1) {
        topIndex.value = 0
      } else {
        topIndex.value++
      }
    }
    const index = mvList.value[currentIndex.value]
      ? mvList.value[currentIndex.value]
      : mvTopList.value[topIndex.value]
    mvId.value = index.id
    PubSub.publish('mvId', mvId.value)
  })
})

onUnmounted(() => {
  // console.log("卸载");
})
</script>

<style lang="less" scoped>
// 内容盒子
.container {
  margin: 0 auto;
  width: 1126px;
  .brilliant {
    display: flex;
  }
}
// 标题
.brilliantVideo {
  .videoTitle {
    height: 42px;
    line-height: 42px;
    display: flex;
    h1 {
      margin: 0;
      margin-right: 24px;
    }
    .titleText {
      display: flex;
      align-items: center;
    }
  }
}
// 视频
.videoContainer {
  width: 710px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 18px;
  .videoBox {
    width: 159.5px;
    margin-right: 16px;
    margin-bottom: 46px;
    .videoImg {
      width: 100%;
      height: 263.5px;
      font-size: 0;
      img {
        border-radius: 5px;
        width: 100%;
        height: 100%;
      }
    }
    .videoContext {
      padding-top: 16px;
      h5 {
        margin: 0;
        width: 159.5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .videoInfo {
        display: flex;
        margin-top: 5px;
        color: #999;
      }
    }
  }
}
// 排行版
.brilliantTop {
  width: 416px;
  height: 756px;
  .topTitle {
    padding-left: 7px;
    h1 {
      margin: 0;
    }
  }
  .topContext {
    width: 383px;
    height: 690px;
    margin-top: 24px;
    padding: 0 16.5px;
    background-color: #fbfbfb;
    .topItem {
      display: flex;
      height: 69px;
      align-items: center;
      border-bottom: 1px solid #f2f2f2;
      h1 {
        margin: 0;
        margin-right: 5px;
        width: 35px;
        text-align: center;
        color: #fe3666;
      }
      .topDesc {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        .topIcon {
          display: flex;
          margin-top: 4px;
          span {
            font-size: 13px;
            color: #999;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
